<template>
    <div class="hd history">
     

      <search-bar :menu="menu" :showsearch="false" :activeitem="activeitem"></search-bar>
      <position style="padding:12px;width:auto;">
        <router-link to="/cloud">云诊室</router-link>
        &gt;
        <router-link to="/cloud_mail">在线支付</router-link>
        &gt;
        <span class="last">物流查询</span>
      </position>

      <div class="processcontainer">
        <div class="druginfobox flex">
          <img src="../../assets/banner03.png" alt="" class="drugimg">
          <ul class="druginfo">
            <li>
              <b class="drugname">药品名称</b>
            </li>
            <li>
              <span>运单编号：</span>
              <span>11111111111111111111111</span>
            </li>
            <li>
              <span>官方电话：</span>
              <span>11111111111111111111</span>
            </li>
          </ul>
        </div>

        <div class="processbox">
          <div class="processbox_title flex flex_between">
            <p class="flex flex_vcenter">
              <span class="cloud_tag"></span>
              <font color="#A13717">物流跟踪</font>
            </p>
            <p>
              <span>物流公司：</span>
              <b>顺丰速运</b>
              <span class="font_org">派件中</span>
            </p>
          </div>
          <div class="process_steps">
            <el-steps :space="100" direction="vertical" :active="1">
              <el-step title="步骤 1" description="heeheh"></el-step>
              <el-step title="步骤 2"></el-step>
              <el-step title="步骤 3"></el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Loading from '../../components/Loading'
  import SearchBar from '../../components/SearchBar'
  import Position from '../../components/Position'
  import {CLOUD_MENU} from '../../api/api'
  export default {
    components: {Loading, SearchBar, Position},
    data () {
      return {
        menu: CLOUD_MENU,
        activeitem: 2
      }
    },
    mounted () {

    },
    methods: {

    }
  }
</script>

<style lang="less">
  .drugimg{
    width:200px;
    height:120px;
  }
  .drugname{
    color:#A13717;
    font-size:16px;
  }
  .druginfo{
    margin-left:20px;
  }
  .druginfo>li{
    padding:5px 0;
  }
  .processbox{
    border:1px solid #FAECE9;
    background-color: #FFFBF8;
    margin:20px;
  }
  .processbox_title{
    margin:0 10px;
    border-bottom:1px solid #FAECE9;
    padding:10px 0;
  }
  .cloud_tag{
    width:31px;
    height:15px;
    background-image: url('../../assets/drawable-hdpi/tips_cloud.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right:10px;
  }
  .el-step__line{
    position:absolute;
    top:28px!important;
    left:13px!important;
  }
  .process_steps{
    margin:40px;
  }
  .processcontainer{
    background-color: white;
    padding-bottom:40px;
  }
  .druginfobox{
    padding:0 20px;
  }
  .font_org{
    color:#F08B30;
  }
</style>
